<script setup lang="ts">
import { formatNumber } from '@/home/utils/format';
import type { HotColumn } from './hot';

const props = defineProps<HotColumn>();
</script>

<template>
  <div class="h-52 flex-col justify-between">
    <div class="flex-y-center justify-between">
      <RouterLink :to="`/column/detail/${props.columnId}`" target="_blank">
        <h3 class="max-w-300 truncate text-16 text-#292929 font-500 leading-28 hover:underline">
          {{ props.columnName }}
        </h3>
      </RouterLink>
      <div class="flex-y-center gap-4 text-14px color-hex-575757 font-400 leading-16">
        <div class="i-icons:fire size-16 text-#E24E40"></div>
        <div>{{ formatNumber(props.totalScore) }}</div>
      </div>
    </div>
    <p class="max-w-372 truncate text-14 c-hex-575757 leading-22">
      {{ props.columnDesc }}
    </p>
  </div>
</template>

<style lang="scss" scoped>
</style>
